<script setup lang="ts">
import { inject, ref } from 'vue'
const http: any = inject('http');
const loading = ref(true);

interface ISJSDataModal {
  name: string;
  recentPrice: string;
  topPrice: string;
  bottomPrice: string;
  openPrice: string;
  updateTime: string;
};

interface ISBDataModal {
  name: string;
  taxExclusivePrice: string;
  wage: string;
  taxInclusivePrice: string;
  updateTime: string;
};

type IOtherBrands = ISJSDataModal;

interface IDataModal {
  SJSData: ISJSDataModal;
  SBData: ISBDataModal;
  otherBrands: IOtherBrands;
}

interface IResultModal {
  code: number;
  data: IDataModal;
  msg: string;
}

const data = ref<IDataModal | null>(null);
http.get('/api/gold/get').then((res: IResultModal) => {
  if (res.code === 1) {
    data.value = res.data;
    loading.value = false;
  }
})
</script>

<template>
  <div class="oilPrice" v-loading="loading">
    <h1>上交所实时现货金价</h1>
    <el-table :data="data?.SJSData" border style="width: 100%;" size="large">
      <el-table-column prop="name" label="种类" />
      <el-table-column prop="recentPrice" label="最新价 ￥/g" />
      <el-table-column prop="topPrice" label="最高价 ￥/g" />
      <el-table-column prop="bottomPrice" label="最低价 ￥/g" />
      <el-table-column prop="openPrice" label="今开盘 ￥/g" />
      <el-table-column prop="updateTime" label="更新时间" />
    </el-table>
    <h1 style="margin-top: 20px;">水贝首饰现货金价</h1>
    <el-table :data="data?.SBData" border style="width: 100%;" size="large">
      <el-table-column prop="name" label="种类" />
      <el-table-column prop="taxExclusivePrice" label="不含税(无票) ￥/g" />
      <el-table-column prop="wage" label="工费 ￥/g" />
      <el-table-column prop="taxInclusivePrice" label="含税(开票) ￥/g" />
      <el-table-column prop="wage" label="工费 ￥/g" />
      <el-table-column prop="updateTime" label="更新时间" />
    </el-table>
    <h1 style="margin-top: 20px;">其他品牌实时现货金价</h1>
    <el-table :data="data?.otherBrands" border style="width: 100%;" size="large">
      <el-table-column prop="name" label="种类" />
      <el-table-column prop="recentPrice" label="最新价 ￥/g" />
      <el-table-column prop="topPrice" label="最高价 ￥/g" />
      <el-table-column prop="bottomPrice" label="最低价 ￥/g" />
      <el-table-column prop="openPrice" label="今开盘 ￥/g" />
      <el-table-column prop="updateTime" label="更新时间" />
    </el-table>
  </div>
</template>

<style scoped>
.oilPrice h1 {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
</style>